import React, { useMemo } from 'react';
import { Icon, Button } from 'antd';
import { IconProps } from 'antd/lib/icon';
import { ButtonProps } from 'antd/lib/button';
import styles from './index.less';

interface IOtherProps {
    [key: string]: any;
}

interface IProps extends IconProps, IOtherProps {
    type: string;
    className?: string;
}

/**
 * 兼容 IconFont 和 Antd Icon
 */
const IconPro = ({ type = '', className = '', ...props }: IProps) => {
    const isIconFont = useMemo(() => type.startsWith('icon'), [type]);

    return (
        <React.Fragment>
            {isIconFont ? (
                <i className={`${styles.customIcon} iconfont ${type} ${className}`} {...props}></i>
            ) : (
                <Icon type={type} className={className} {...props} />
            )}
        </React.Fragment>
    );
};

interface IButtonProps extends ButtonProps, IOtherProps {
    icon: string;
    className?: string;
    dark?: boolean;
}

/**
 * Icon 类型的 Button
 */
IconPro.Button = ({ icon, className, dark, danger, ...props }: IButtonProps) => (
    <Button
        type="link"
        className={`${styles.iconButton} ${dark ? styles.darkButton : ''} ${
            danger ? styles.hoverDanger : ''
        } ${className || ''}`}
        {...props}
    >
        <IconPro type={icon} />
    </Button>
);

export default IconPro;
